<template>
	<div class="bg-white">
		<Form :label-width="80">
			<Row>
				<Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
					<FormItem class="w-50" label="课程封面">
						<img style="width: 50px; height: 50px;" :src="kclx.cover" />
					</FormItem>
					<FormItem class="w-50" label="课程名称">
						<Input v-model="kclx.kcname" disabled></Input>
					</FormItem>
					<FormItem class="w-50" label="课程描述">
						<Input v-model="kclx.ms" disabled></Input>
					</FormItem>
					<FormItem class="w-50" label="教练名称">
						<div>
							<Input v-model="kclx.jlname" disabled></Input>
						</div>
					</FormItem>
					<FormItem class="w-50" label="类型名称">
						<Input v-model="kclx.lxname" disabled></Input>
					</FormItem>
					<!-- <FormItem class="w-50" label="父级类型">
					  <Input :value="kclx.pid === 123 ? '拳击类' : '舞蹈类'" disabled></Input>
					</FormItem> -->
					<FormItem class="w-50" label="父级类型">
					  <!-- 禁用的 Input 显示当前类型 -->
					  <!-- <Input :value="kclx.pid === 123 ? '拳击类' : '舞蹈类'" disabled></Input> -->
					  
					  <!-- 下拉框用于选择其他数据 -->
					  <div class="mt-2"> <!-- 添加一些上边距以分隔 Input 和 select -->
					    <select v-model="selectedPid" @change="handlePidChange">
					      <option value="">请选择</option>
					      <option value="123">拳击类</option>
					      <option value="456">舞蹈类</option>
					      <option value="789">其他类</option>
					      <!-- 可以根据需要添加更多选项 -->
					    </select>
						
					  </div>
					  <button>保存</button>
					</FormItem>
					
					
					
				</Col>
			</Row>
		</Form>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				kclx: {
					akclxid:"",
					cover:"",
					kcname:"",
					jlname:"",
					lxname:"",
					pname:"",
					ms:"",
					pid:"",
					zs:"",
				
				},
			}
		},
		created: function() {
			this.kclx.kclxid = this.$route.query.id;
			this.loadData();
		},
		mounted: function() {},
		methods: {
			loadData: function() {
				return this.http.get({
					url: "/kclx/info",
					param: {
						kclxid: this.kclx.kclxid
					}
				}).then(res => {
					this.kclx = res;
				});
			},
			
		},
	}
</script>


<style>
</style>